<template>
  <el-select
    :value="value"
    filterable
    :multiple="multiple"
    :placeholder="$t('please_enter',{name:$t('employer_name')})"
    :loading="searchLoading"
    clearable
    @change="changeEmployer"
    :disabled="disabled"
    @clear="clearEmployer"
  >
    <el-option
      v-for="item in employerAllList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
import { listUser } from "@/api/custom/employerList";
export default {
  props: {
    value: [String, Number,Array, null],
    multiple:{
      type: Boolean,
      default: false,
    },
    disabled:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      employerAllList: [],
      searchLoading: false,
    };
  },
  created() {
    this.getEmployerList(null);
  },
  methods: {
    getEmployerList(searchValue) {
      this.searchLoading = true;
      let queryParams = {
        pageNum: 1,
        pageSize: 999,
      };
      listUser({
        ...queryParams,
        userName: searchValue,
      }).then((response) => {
        this.employerAllList = response.data.records.map((item) => {
          return {
            label: item.employerName,
            value: item.id,
            raw: {
              listClass: "",
            },
          };
        });
        this.$emit("setEmployerAllList",this.employerAllList);
        this.searchLoading = false;
      });
    },
    changeEmployer(value){
     this.$emit("input",value);
     let find = this.employerAllList.find((item) => item.value == value);
      this.$emit("change", find);
    },
    clearEmployer(){
      this.$emit("input",null);
    }
  },
};
</script>
<style scoped lang="scss">
</style>

